import { getFileClean, saveFileClean } from "@/api/modules/system/system";
import PageHeader from "@/components/Frame/PageHeader";
import DataKeep from "./dataKeep";
import { showTips } from "@/utils/util";

export default defineComponent({
	setup() {
		const state = reactive<any>({
			fileClean: {
				FILE_CLEAN_THRESHOLD: "",
				FILE_CLEAN_TYPE: ""
			}
		});

		onMounted(() => {
			initFileClean();
		});

		const initFileClean = async () => {
			let { result, success } = await getFileClean({});
			if (success) {
				let arr = result as any;
				arr.map((item: any) => {
					state.fileClean[item.key] = item.value;
				});
			}
		};

		// const validateThreshold = (rule: any, value: any, callback: any) => {
		// 	if (30 < value || value < 0) {
		// 		callback(new Error("磁盘余量错误"));
		// 	} else {
		// 		callback();
		// 	}
		// };
		const rules = reactive({
			// FILE_CLEAN_THRESHOLD: [{ validator: validateThreshold, trigger: "change" }]
		});

		const saveClean = async () => {
			let arr = Object.entries(state.fileClean).map((item: any) => {
				return { key: item[0], value: item[1] };
			});
			let { code, message } = await saveFileClean({ config: arr });
			let ok = showTips(code, "文件清理配置", message);
			if (ok) initFileClean();
		};
		return () => {
			return (
				<div>
					<PageHeader back={false} title="存储配置" />

					<DataKeep></DataKeep>

					<div class="bg-white pl-8 pr-8 pt-2 mt-4">
						<div class="block-title border-bottom">
							<div>
								文件清理配置
								<el-tooltip content="业务产生的磁盘空间（视频、图片等）">
									<span class="iconfont iconinfo pl-2 font-thin" />
								</el-tooltip>
							</div>
						</div>
						<div class="p-4 mt-4">
							<div class="flex">
								<el-form label-width="120px" rules={rules} model={state.fileClean}>
									<el-form-item label="磁盘余量" prop="FILE_CLEAN_THRESHOLD">
										<div class="flex">
											<el-select v-model={state.fileClean.FILE_CLEAN_THRESHOLD}>
												<el-option value="5" label="5" />
												<el-option value="10" label="10" />
												<el-option value="15" label="15" />
												<el-option value="20" label="20" />
												<el-option value="25" label="25" />
												<el-option value="30" label="30" />
											</el-select>
											<span class="pl-2">%</span>
										</div>
									</el-form-item>
									<el-form-item label="清理方式" prop="port">
										<el-radio-group v-model={state.fileClean.FILE_CLEAN_TYPE}>
											<el-radio label="roll">滚动清理</el-radio>
											<el-radio label="discard">上限清理</el-radio>
										</el-radio-group>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" onClick={saveClean}>
											保存
										</el-button>
									</el-form-item>
								</el-form>
								<div class="text-sm ml-20 flex-col text-gray-500 leading-6 ">
									<div>滚动清理：受磁盘空间的影响，只保留最新的数据，同时删除旧数据</div>
									<div>上限清理：到达磁盘空间上限时，停止接收新数据存储</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
